<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="申请退货"
            :hasBack="true"
            :hasHome="true"
        >
        </common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <!-- 退货订单编号 -->
            <div class="refund-order-top">
                <span class="refund-name">退货原因</span>
                <span class="order-id">订单编号：546545415464</span>
            </div>
            <!-- 退货订单编号 -->

            <!-- 退货原因选择 -->
            <div class="reason-select">
                <div
                    class="reason-item"
                    v-for="(item,index) of reasonList"
                    :key="index"
                >
                    <radio
                        radioName="refund-reason"
                        @radioClick="selectReason(item.reasonId)"
                    ></radio>
                    <span class="reason-name">{{item.reasonName}}</span>
                </div>
            </div>
            <!-- 退货原因选择 -->

            <!-- 问题说明 -->
            <div class="reason-info">
                <div class="reason-info-title">问题说明</div>
                <textarea
                    class="reason-input"
                    maxlength="120"
                    placeholder="请填写您要退货的详细原因"
                >
                </textarea>
                <div class="refund-tips">提示：申请提交72小时内商家会做出处理，请耐心等待，若商家超过时间仍未处理请联系客服！</div>
            </div>
            <!-- 问题说明 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 提交申请 -->
        <div class="submit-btn">提交申请</div>
        <!-- 提交申请 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import Radio from '@/components/Radio'
export default {
    name: 'Refund',
    components: {
        CommonHeader,
        CommonScroll,
        Radio
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "1.3rem",
            },
            reasonList: [
                {
                    reasonId: 0,
                    reasonName: '质量问题'
                },
                {
                    reasonId: 1,
                    reasonName: '不想要了'
                },
                {
                    reasonId: 2,
                    reasonName: '其他原因'
                }
            ],
            reundReason: 0
        }
    },
    methods: {
        selectReason (id) {
            this.reundReason = id
            console.log(this.reundReason)
        }
    }
}
</script>

<style lang="stylus" scoped>
.refund-order-top
    display flex
    justify-content space-between
    align-items center
    height 1.11rem
    padding 0 0.26rem
    background #fff
    .refund-name
        font-size 0.38rem
        color #333
    .order-id
        font-size 0.33rem
        color #999
.reason-select
    padding-left 0.26rem
    background #fff
    border-top 1px solid #e5e5e5
    border-bottom 1px solid #e5e5e5
    .reason-item
        display flex
        align-items center
        height 1.11rem
        padding-left 0.1rem
        border-bottom 1px dashed #e5e5e5
        .reason-name
            font-size 0.33rem
            color #666
            margin-left 0.26rem
    .reason-item:last-child
        border none
.reason-info
    padding 0 0.26rem
    background #fff
    .reason-info-title
        line-height 1.11rem
        font-size 0.38rem
        color #333
    .reason-input
        width 100%
        height 2.7rem
        padding 0.26rem
        box-sizing border-box
        border 1px solid #e5e5e5
        outline none
        resize none
    .refund-tips
        padding 0.5rem 0
        font-size 0.33rem
        color #999
        line-height 1.3
.submit-btn
    position absolute
    bottom 0
    left 0
    right 0
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
</style>


